<template>
  <a-card :loading="loading" :bordered="false">
    <!-- 业务表单 -->
    <a-form :form="form" style="margin-top: 8px">
      <h2 style="text-align:center;">广东培正学院2020年度共青团优秀个人申报表</h2>
      
      <table class="MsoNormalTable" border="1" cellspacing="0" style='font-family:"font-size:10pt;width:100%;'>
        <tbody>
          <tr>
            <td width="67" valign="top" colspan="2">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;">姓名</span>
              </p>
            </td>
            <td width="76" valign="top">
              <p class="18">
                <span style="font-family:仿宋_GB2312;font-size:12pt;" v-if="browseMode">{{
                  formData.creatorName
                }}</span>
                <a-form-item v-else>
                  <x-select-user-by-dep
                    :searchIcon="true"
                    :disabled="!editable || editableFiexd['creatorId']"
                    v-decorator="[
                      'creatorId',
                      {
                        initialValue:formData.creatorId,
                        rules: [{ required: true, message: '请选择学生！' }]
                      }
                    ]"
                    :multi="false"
                    @selected="selectUser"
                  ></x-select-user-by-dep>
                </a-form-item>
              </p>
            </td>
            <td width="61" valign="top">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;">性别</span>
              </p>
            </td>
            <td width="88" valign="top" colspan="2">
              <p class="18" align="center" style="text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;" v-if="browseMode">{{ formData.sex==2?"女":"男" }}</span>
                <a-form-item v-else>
                  <a-select
                    placeholder="请选择性别"
                    :disabled="!editable || editableFiexd['sex']"
                    v-decorator="[
                      'sex',
                      {
                        initialValue:formData.sex,
                        rules: [{ required: true, message: '请选择性别！' }]
                      }
                    ]"
                  >
                    <a-select-option :value="1">男</a-select-option>
                    <a-select-option :value="2">女</a-select-option>
                  </a-select>
                </a-form-item>
              </p>
            </td>
            <td width="59" valign="top" colspan="2">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;">学号</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
            <td width="109" valign="top">
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;" v-if="browseMode">{{ formData.stdNo }}</span>
                <a-form-item v-else>
                  <a-input
                    :disabled="!editable || editableFiexd['stdNo']"
                    placeholder=""
                    v-decorator="['stdNo', { initialValue:formData.stdNo,rules: [{ required: true, message: '请输入学号' }] }]"
                  />
                </a-form-item>
              </p>
            </td>
          </tr>
          <tr>
            <td width="67" valign="top" colspan="2">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;">学院</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
            <td width="76" valign="top">
              <p class="18" style="text-indent:0pt;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;" v-if="browseMode">{{ formData.college }}</span>
                <a-form-item v-else>
                  <a-input
                    placeholder=""
                    :disabled="!editable || editableFiexd['college']"
                    v-decorator="['college', { initialValue:formData.college,rules: [{ required: true, message: '请输入学院' }] }]"
                  />
                </a-form-item>
              </p>
            </td>
            <td width="61" valign="top">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;">专业</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
            <td width="88" valign="top" colspan="2">
              <p class="18" style="text-indent:0pt;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;" v-if="browseMode">{{ formData.major }}</span>
                <a-form-item v-else>
                  <a-input
                    placeholder=""
                    :disabled="!editable || editableFiexd['major']"
                    v-decorator="['major', { initialValue:formData.major,rules: [{ required: true, message: '请输入专业' }] }]"
                  />
                </a-form-item>
              </p>
            </td>
            <td width="59" valign="top" colspan="2">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;">班级</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
            <td width="109" valign="top">
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;" v-if="browseMode">{{ formData.clazz }}</span>
                <a-form-item v-else>
                  <a-input
                    placeholder=""
                    :disabled="!editable || editableFiexd['clazz']"
                    v-decorator="['clazz', { initialValue:formData.claszz,rules: [{ required: true, message: '请输入班级' }] }]"
                  />
                </a-form-item>
              </p>
            </td>
          </tr>
          <tr>
            <td width="67" valign="top" colspan="2">
              <p class="18" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;">政治面貌</span>
              </p>
            </td>
            <td width="76" valign="top">
              <p class="18">
                <span style="font-family:仿宋_GB2312;font-size:12pt;" v-if="browseMode">{{
                  politicalFilter(formData.politicalStatus)
                }}</span>
                <a-form-item v-else>
                  <j-dict-select-tag
                    :triggerChange="true"
                    :disabled="!editable || editableFiexd['politicalStatus']"
                    v-decorator="['politicalStatus', { initialValue:formData.politicalStatus,rules: [{ required: true, message: '请选择政治面貌' }] }]"
                    dictCode="political_outlook"
                  />
                </a-form-item>
              </p>
            </td>
            <td width="149" valign="top" colspan="3">
              <p class="18" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;">所担任的职务</span>
              </p>
            </td>
            <td width="169" valign="top" colspan="3">
              <p class="18">
                <span style="font-family:仿宋_GB2312;font-size:12pt;" v-if="browseMode">{{ formData.post }}</span>
                <a-form-item v-else>
                  <a-input
                    placeholder=""
                    :maxlength="20"
                    :disabled="!editable || editableFiexd['post']"
                    v-decorator="[
                      'post',
                      {
                        initialValue:formData.post,
                        rules: [
                          { required: true, message: '请输入担任职务！' },
                          { maxLength: 20, message: '最多输入20个字符！' }
                        ]
                      }
                    ]"
                  />
                </a-form-item>
              </p>
            </td>
          </tr>
          <tr>
            <td width="144" valign="center" colspan="3">
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;">申报奖项</span
                ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
              </p>
            </td>
            <td width="319" valign="center" colspan="6">
              <div v-if="browseMode" style="display:flex;align-items:center;min-height: 6em;">
                <dl class="MsoNormalDL" style='font-family:"font-size:10.5pt;'>
                  <dd v-for="(item,key) in gloryDictOptions" :key="key">
                    <span style="font-family:仿宋_GB2312;font-size:12pt;"  >{{item.text}}</span
                    >
                    <!-- <span style="font-family:Wingdings;font-size:12pt;">{{formData.glory== item.value?'þ':'¨'}}</span
                    > -->
                    <a-icon type="check-square" v-if="formData.glory== item.value"/>
                    <a-icon type="border" v-else/>
                  </dd>
                </dl>
              </div>
              <a-form-item v-else>
                <j-dict-select-tag
                  type="radio"
                  v-decorator="['glory', { initialValue:formData.glory,rules: [{ required: true, message: '请选择申报奖项' }] }]"
                  :disabled="!editable || editableFiexd['glory']"
                  :triggerChange="true"
                  dictCode="honor_list"
                />
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td width="45" valign="center" rowspan="2">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;">GPA值</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
            <td width="99" valign="top" colspan="2">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;">{{periodFilter(periodA)}}</span>
              </p>
            </td>
            <td width="61" valign="top">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;" v-if="browseMode">{{ formData.gpaB }}</span>
                <a-form-item v-else>
                  <a-input
                    placeholder=""
                    :disabled="!editable || editableFiexd['gpaB']"
                    v-decorator="['gpaB', { initialValue:formData.gpaB,rules: [{ required: true, message: '请输入GPA值' }] }]"
                  />
                </a-form-item>
              </p>
            </td>
            <td width="58" valign="center" rowspan="2">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;">综合测评排名百分比</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
            <td width="87" valign="top" colspan="2">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;">{{periodFilter(periodA)}}</span>
              </p>
            </td>
            <td width="112" valign="top" colspan="2">
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;" v-if="browseMode">{{
                  formData.evaluatioRankingB
                }}</span>
                <a-form-item v-else>
                  <a-input
                    placeholder=""
                    :disabled="!editable || editableFiexd['evaluatioRankingB']"
                    v-decorator="[
                      'evaluatioRankingB',
                      { initialValue:formData.evaluatioRankingB,rules: [{ required: true, message: '请输入综合测评排名百分比' }] }
                    ]"
                  />
                </a-form-item>
              </p>
            </td>
          </tr>
          <tr>
            <td width="99" valign="top" colspan="2">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;">{{periodFilter(periodB)}}</span>
              </p>
            </td>
            <td width="61" valign="top">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;" v-if="browseMode">{{ formData.gpaA }}</span>
                <a-form-item v-else>
                  <a-input
                    placeholder=""
                    :disabled="!editable || editableFiexd['gpaA']"
                    v-decorator="['gpaA', { initialValue:formData.gpaA,rules: [{ required: true, message: '请输入GPA值' }] }]"
                  />
                </a-form-item>
              </p>
            </td>
            <td width="87" valign="top" colspan="2">
              <p class="18" align="center" style="text-indent:0pt;text-align:center;">
                <span style="font-family:仿宋_GB2312;font-size:12pt;">{{periodFilter(periodB)}}</span>
              </p>
            </td>
            <td width="112" valign="top" colspan="2">
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;" v-if="browseMode">{{
                  formData.evaluatioRankingA
                }}</span>
                <a-form-item v-else>
                  <a-input
                    placeholder=""
                    :disabled="!editable || editableFiexd['evaluatioRankingA']"
                    v-decorator="[
                      'evaluatioRankingA',
                      { initialValue:formData.evaluatioRankingA,rules: [{ required: true, message: '请输入综合测评排名百分比' }] }
                    ]"
                  />
                </a-form-item>
              </p>
            </td>
          </tr>
          <tr>
            <td width="67" valign="center" colspan="2">
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;">个人总结</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
            <td width="395" valign="top" colspan="7">
              <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;background:#FFFFFF;'>
                <b><span style="font-family:仿宋_GB2312;font-size:12pt;">参评</span></b
                ><b><span style="font-family:仿宋_GB2312;font-size:12pt;">五四红旗青年</span></b
                ><b><span style="font-family:仿宋_GB2312;font-size:12pt;">、</span></b
                ><b><span style="font-family:仿宋_GB2312;font-size:12pt;">十佳团支部书记</span></b
                ><b><span style="font-family:仿宋_GB2312;font-size:12pt;">需附1200字左右事迹材料</span></b
                ><b><span style="font-family:Arial;color:#333333;font-size:12pt;"></span></b>
              </p>
              <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;background:#FFFFFF;'>
                <span style="font-family:宋体;color:#333333;font-size:12pt;">&nbsp;</span>
              </p>
              <div class="MsoNormal">
                <div v-if="browseMode" v-html="formData.personalSummary||''"></div>
                <a-form-item v-else>
                  <!-- <a-textarea
                    :autoSize="{ minRows: 4, maxRows: 8 }"
                    showCount
                    allow-clear
                    :maxlength="1200"
                    placeholder="请输入1200字以内！"
                    :disabled="!editable || editableFiexd['personalSummary']"
                    v-decorator="[
                      'personalSummary',
                      {
                        rules: [
                          { required: true, message: '请输入个人总结！' },
                          { minLength: 20, message: '至少20个字符！' }
                        ]
                      }
                    ]"
                  /> -->
                  <j-editor 
                    :disabled="!editable || editableFiexd['personalSummary']"
                    v-decorator="[ 'personalSummary', { initialValue:formData.personalSummary,rules: [{ required: true, message: '请输入内容！' },{ maxLength: 1200, message: '内容不能超出1200个字符！' }]}]" triggerChange
                  />
                </a-form-item>
              </div>
            </td>
          </tr>
          <tr>
            <td width="67" valign="center" colspan="2">
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;">获 &nbsp;&nbsp;奖</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;">情 &nbsp;&nbsp;况</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
            <td width="395" valign="top" colspan="7">
              <div class="MsoNormal">
                <div v-if="browseMode" v-html="formData.awards||''"></div>
                <a-form-item v-else style="min-height: 210px">
                  <!-- <a-textarea
                    :autoSize="{ minRows: 4, maxRows: 8 }"
                    showCount
                    allow-clear
                    :maxlength="200"
                    :disabled="!editable || editableFiexd['awards']"
                    placeholder="请输入200字以内！"
                    v-decorator="[
                      'awards',
                      {
                        rules: [
                          { required: true, message: '请输入内容！' },
                          { minLength: 20, message: '至少20个字符！' }
                        ]
                      }
                    ]"
                  /> -->
                  <j-editor 
                    :disabled="!editable || editableFiexd['awards']"
                    v-decorator="[ 'awards', { initialValue:formData.awards,rules: [{ required: true, message: '请输入内容！' },{ maxLength: 200, message: '内容不能超出200个字符！' }]}]" triggerChange
                  />
                </a-form-item>
              </div>
            </td>
          </tr>
          <tr>
            <td width="67" valign="center" colspan="2">
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;">辅导员或</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;">指导老师意</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;">&nbsp;&nbsp;&nbsp;</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;">见</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
            <td width="395" valign="top" colspan="7">
              <!-- 指导老师 -->
              <a-form-item v-if="!browseMode" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="指导老师">
                <x-select-user-by-dep
                  v-decorator="[
                  'instructorId',
                  {
                    initialValue: formData.instructorId,
                    rules: [{ required: true, message: '请选择指导老师！' }]
                  }
                  ]"
                  userType="teacher"
                  :disabled="!editable||editableFiexd['instructorId']"
                  :multi="false" @selected="setInstructor"></x-select-user-by-dep>
              </a-form-item>
              <div
                class="MsoNormal"
                style='display:block;min-height:5em;text-align:justify;font-family:"font-size:10.5pt;'
              >
                <div style="font-family:仿宋_GB2312;font-size:12pt;" v-html="task1.opinion"></div>
              </div>
              <p
                class="MsoNormal"
                style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:60%;'
              >
                <span style="font-family:仿宋_GB2312;font-size:12pt;">签 &nbsp;名:&nbsp;{{task1.dealUserName}}</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
              <p
                class="MsoNormal"
                style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:65%;'
              >
                <span style="font-family:仿宋_GB2312;font-size:12pt;"
                  >{{task1.dealTime? moment(task1.dealTime).format('&nbsp;&nbsp;yyyy&nbsp;年&nbsp;&nbsp;MM&nbsp;月&nbsp;&nbsp;DD&nbsp;日'):'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日'}}</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
          </tr>
          <tr>
            <td width="67" valign="center" colspan="2">
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;">学院</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;">团委</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;">意</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;">&nbsp;&nbsp;&nbsp;</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;">见</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
            <td width="395" valign="top" colspan="7">
              <div
                class="MsoNormal"
                style='display:block;min-height:5em;text-align:justify;font-family:"font-size:10.5pt;'
              >
                <div style="font-family:仿宋_GB2312;font-size:12pt;" v-html="task2.opinion"></div>
              </div>
              <p
                class="MsoNormal"
                style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:60%;'
              >
                <span style="font-family:仿宋_GB2312;font-size:12pt;">签 &nbsp;名（盖章）:&nbsp;{{task2.dealUserName}}</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
              <p
                class="MsoNormal"
                style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:65%;'
              >
                <span style="font-family:仿宋_GB2312;font-size:12pt;"
                  >{{task2.dealTime? moment(task2.dealTime).format('&nbsp;&nbsp;yyyy&nbsp;年&nbsp;&nbsp;MM&nbsp;月&nbsp;&nbsp;DD&nbsp;日'):'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日'}}</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
          </tr>
          <tr>
            <td width="67" valign="center" colspan="2">
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;">学校团委</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
              <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                <span style="font-family:仿宋_GB2312;font-size:12pt;">意</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;">&nbsp;&nbsp;&nbsp;</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;">见</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
            <td width="395" valign="top" colspan="7">
              <div
                class="MsoNormal"
                style='display:block;min-height:5em;text-align:justify;font-family:"font-size:10.5pt;'
              >
                <div style="font-family:仿宋_GB2312;font-size:12pt;" v-html="task3.opinion"></div>
              </div>
              <p
                class="MsoNormal"
                style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:60%;'
              >
                <span style="font-family:仿宋_GB2312;font-size:12pt;">签 &nbsp;名（盖章）: &nbsp;{{task3.dealUserName}}</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
              <p
                class="MsoNormal"
                style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:65%;'
              >
                <span style="font-family:仿宋_GB2312;font-size:12pt;"
                  >{{task3.dealTime? moment(task3.dealTime).format('&nbsp;&nbsp;yyyy&nbsp;年&nbsp;&nbsp;MM&nbsp;月&nbsp;&nbsp;DD&nbsp;日'):'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日'}}</span
                ><span style="font-family:仿宋_GB2312;font-size:12pt;"></span>
              </p>
            </td>
          </tr>
        </tbody>
      </table>
      <span style="display:none;" id="__kindeditor_bookmark_start_3__"></span>
    </a-form>
  </a-card>
</template>

<script>
import JDate from '@/components/jeecg/JDate.vue'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
import XSelectUserByDep from '@/components/extends/XSelectUserByDep'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { httpAction, getAction } from '@/api/manage'
import { merge, find, pick, indexOf } from 'lodash'
import JEditor from '@/components/jeecg/JEditor'
import moment from 'moment'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
export default {
  name: 'HonorForm',
  components: {
    JDate,
    JEditor,
    JSelectDepart,
    JDictSelectTag,
    JSelectMultiUser,
    XSelectUserByDep,
  },
  model: {
    prop: 'data',
    event: 'onchange'
  },
  props: {
    dataId: String,
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    browseMode: Boolean,
    editable: {
      type: Boolean,
      default: true
    },
    editableFiexd: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: true, //数据加载
      url: {
        add: '/gloryApply/add',
        edit: '/gloryApply/add',
        queryById: '/gloryApply/queryById'
      },
      form: this.$form.createForm(this), //表单
      formInited: false,
      formData: {}, //数据
      politicalDictOptions: [],
      gloryDictOptions:[],
      periodDictOptions:[],
      currentPeriod:'',
    }
  },
  watch: {
    dataId(nv) {
      if (nv) {
        this.getData(nv)
      }
    },
    data: {
      handler(nv, ov) {
        // this.formData = {}
        this.formData = merge(this.formData, nv)
      },
      immediate: true,
      deep: true
    },
    formData: {
      handler(nv, ov) {
        this.$emit('onchange', nv)
      },
      immediate: true,
      deep: true
    },
    
  },
  computed:{
    task1(){
      if(this.formData&&this.formData.approveRecords){
        return this.formData.approveRecords[0]||{}
      }else{
        return {}
      }
    },
    task2(){
      if(this.formData&&this.formData.approveRecords){
        return this.formData.approveRecords[1]||{}
      }else{
        return {}
      }

    },
    task3(){
      if(this.formData&&this.formData.approveRecords){
        return this.formData.approveRecords[2]||{}
      }else{
        return {}
      }
    },
    periodA(){
      let current = ''
      if(Array.isArray(this.periodDictOptions)){
        if(this.formData.period){
          let seft = this
          this.periodDictOptions.forEach(function(item,key){
            if(seft.formData.period==item.value){
              return current = key
            }
          })
        }else{
          current = this.periodDictOptions.length - 1
        }
        this.periodDictOptions[current]&&(this.formData.period = this.periodDictOptions[current].value)
      }
      if(current>1){
        return this.periodDictOptions[current-2].value
      }else{
        return ''
      }
    },
    periodB(){
      let current = ''
      if(Array.isArray(this.periodDictOptions)){
        if(this.formData.period){
          let seft = this
          this.periodDictOptions.forEach(function(item,key){
            if(seft.formData.period==item.value){
              return current = key
            }
          })
        }else{
          current = this.periodDictOptions.length - 1
        }
        this.periodDictOptions[current]&&(this.formData.period = this.periodDictOptions[current].value)
      }
      if(current>0){
        return this.periodDictOptions[current-1].value
      }else{
        return ''
      }
    }
  },
  created() {
    this.form.resetFields()
    this.initForm()
    this.initDictConfig()
    this.form.resetFields()
    if (this.dataId) {
      this.getData(this.dataId)
    }
  },
  methods: {
    moment:moment,
    initForm() {
      // if(this.formInited) return
      const formObj = {
        awards: '',
        clazz: '',
        college: '',
        creatorId: '',
        creatorName: '',
        evaluatioRankingA: '',
        evaluatioRankingB: '',
        exportIndex: '',
        glory: '',
        gpaA: '',
        gpaB: '',
        id: '',
        instructor: '',
        instructorId: '',
        major: '',
        name: '',
        period: '',
        personalSummary: '',
        politicalStatus: '',
        post: '',
        sex: '',
        stdNo: ''
      }
      for (let keys of Object.keys(formObj)) {
        this.form.getFieldDecorator(keys)
      }
    },
    initDictConfig() {
      //初始化字典 
      initDictOptions('periods').then(res => {
        if (res.success) {
          this.periodDictOptions = res.result
        }
      })
      initDictOptions('political_outlook').then(res => {
        if (res.success) {
          this.politicalDictOptions = res.result
        }
      })
      initDictOptions('honor_list').then(res => {
        if (res.success) {
          this.gloryDictOptions = res.result
        }
      })
    },
    periodFilter(value) {
      return filterDictText(this.periodDictOptions, value)
    },
    politicalFilter(value) {
      return filterDictText(this.politicalDictOptions, value)
    },
    selectUser(data) {
      let rows = data.rows
      if (Array.isArray(rows) && rows[0]) {
        let obj = {
          name: rows[0].realname,
          creatorName: rows[0].realname,
          college: rows[0].college,
          major: rows[0].major,
          clazz: rows[0].clazz,
          stdNo: rows[0].stdNo,
          sex: rows[0].sex
        }
        let temp = {}
        for(let k of Object.keys(obj)){
          if(this.formData.creatorId&&this.formData.creatorId==data.value){
            if(obj[k]){
              temp[k] = obj[k]
            }
          }else{
            Object.assign(temp,obj)
          }
        }
        this.$nextTick(function(){
          this.form.setFieldsValue(temp)
          Object.assign(this.formData,temp)
        })
      }
    },
    add(data) {
      this.loading = false
      this.open(data)
    },
    edit(record) {
      this.open(record)
    },
    open(record) {
      this.initForm()
      this.formData = Object.assign({}, record)
      if (this.formData.id) {
        this.getData(record.id)
      }
    },
    getData(id) {
      this.loading = true
      getAction(this.url.queryById, { id })
        .then(res => {
          this.loading = false
          this.formData = res.result || {}
          this.$nextTick(() => {
            this.initForm()
            this.form.setFieldsValue(
              pick(this.formData, 
                'awards',
                'clazz',
                'college',
                'creatorId',
                'creatorName',
                'evaluatioRankingA',
                'evaluatioRankingB',
                'exportIndex',
                'glory',
                'gpaA',
                'gpaB',
                'id',
                'instructor',
                'instructorId',
                'major',
                'name',
                'period',
                'personalSummary',
                'politicalStatus',
                'post',
                'sex',
                'stdNo'
              )
            )
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    setInstructor(data){
      if(this.formData) this.formData.instructor = data.name
    },
    submitForm() {
      const that = this
      return new Promise((resolve, reject) => {
        // 触发表单验证
        that.form.validateFields((err, values) => {
          if (!err) {
            let httpurl = ''
            let method = ''
            if (!that.formData.id) {
              httpurl += that.url.add
              method = 'post'
            } else {
              httpurl += that.url.add
              method = 'post'
            }
            let formData = merge({}, that.formData, values)

            httpAction(httpurl, formData, method)
              .then(res => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  resolve(res)
                } else {
                  that.$message.warning(res.message)
                  reject(res.message)
                }
              })
              .finally(() => {
                that.loading = false
              })
          } else {
            that.$message.warning('校验失败，请检查表单内容！')
            reject(values)
          }
        })
      })
    }
  }
}
</script>

<style scoped>
table {
  width: 100%;
  table-layout: fixed;
}
table td {
  padding: 5px;
  line-height: 1.6;
  display: table-cell;
  vertical-align: middle;
}
p {
  line-height: 1.6;
  margin: 0;
}
.MsoNormalDL{
  display: inline-block;
  margin: 0;
}
.MsoNormalDL dd{
  margin: 0;
  width: 50%;
  display: inline-block;
  padding-left: 5em;
  vertical-align: middle;
}
</style>
